<template>
  <!-- 合同页面 -->
  <div id="input-manager">
    <el-row>
      <el-col :span="22">
        <el-input
          placeholder="请输入名称"
          type="text"
          v-model="query"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <!-- 按钮 -->
        <el-button type="primary" @click="setQueryName">搜索</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      id="gbox"
      :useIndex="true"
      :stripe="true"
      :border="true"
      :fit="true"
      :useMultiSelect="false"
    >
      <el-table-column type="index" label="序号" width="55" align="center">
      </el-table-column>
      <el-table-column
        v-for="(col, index) in columns"
        :key="index"
        :label="col.label"
        :prop="col.prop"
        :width="col.width"
        align="center"
      >
        <!--插槽，如果当前列是操作，添加按钮 如果不是 展示对应列的数据-->
        <template v-slot="{ column, row }">
          <div v-if="column.property === 'opts'">
            <!--5代表终审通过,大于5就代表已经生成合同了，需要禁用-->
            <el-button
              :disabled="row['status'] > 5"
              @click="createContract(row.id)"
              type="primary"
              >生成合同</el-button
            >
            <!--7代表生成合同,不等于7需要禁用-->
            <el-button
              :disabled="row['status'] !== 7"
              @click="downContract(row.id)"
              type="success"
              >下载合同</el-button
            >
          </div>
          <div v-else-if="column.property === 'status'">
            <el-tag :type="row[column.property] === 7 ? 'success' : ''">{{
              row[column.property] === 7 ? "生成合同" : "未生成合同"
            }}</el-tag>
          </div>
          <div v-else>
            {{ row[column.property] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="updateSize"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageOptions.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows"
    >
    </el-pagination>
  </div>
</template>
  
  <script>
import {
  contractList,
  generateContract,
  downloadContract,
} from "@/apis/loan.js";
import request from "@/utils/request";
export default {
  data() {
    return {
      //搜索栏数据
      query: "",
      //表单数据
      tableData: [],
      columns: [
        {
          label: "姓名",
          prop: "name",
          width: "100",
        },
        {
          label: "身份证",
          prop: "identity_card",
          width: "260",
        },
        {
          label: "合同状态",
          prop: "status",
          width: "160",
        },
        {
          label: "操作",
          prop: "opts",
        },
      ],
      //分页参数
      pageOptions: {
        pageNo: 1,
        pageSize: 100,
      },
      //数据总数
      rows: 0,
    };
  },
  methods: {
    //下载方法
    async downContract(id) {
      let res = await downloadContract(id);
      if (res.data.code === 20000) {
        //返回的数据中浏览器没有/api 替换掉
        let url = res.data.data.url.replace("/api", "");
        let fileName = "合同_" + id + ".docx";
        //使用url发起请求 返还blob数据类型
        let res2 = await request({
          url,
          responseType: "blob",
        });
        //设定内存中的临时指向
        let link = window.URL.createObjectURL(res2.data);
        //创建link标签
        let tagA = document.createElement("a");
        //指定指向
        tagA.href = link;
        tagA.download = fileName;
        //隐藏a标签了
        tagA.style.display = "none";
        // 插入到body中
        document.body.appendChild(tagA);
        // 点击a标签
        tagA.click();
        // 释放资源
        document.body.removeChild(tagA);
        // 释放临时url
        window.URL.revokeObjectURL(url);
      }
    },
    //生成合同
    async createContract(id) {
      let res = await generateContract(id);
      if (res.data.code === 20000) {
        this.getContract();
      }
    },
    //改变分页的方法
    handleCurrentChange(pageNo) {
      this.pageOptions.pageNo = pageNo;
      this.getContract();
    },
    //改变每页多少条的方法
    updateSize(pageSize) {
      this.pageOptions.pageSize = pageSize;
      this.getContract();
    },
    //搜索方法
    async setQueryName() {
      //给传过去的参数一个name属性用于获取搜索数据
      this.pageOptions.name = this.query;
      this.getContract(this.pageOptions);
      this.pageOptions.name = null;
    },
    //获取数据
    async getContract() {
      let res = await contractList(this.pageOptions);
      if (res.data.code === 20000) {
        this.tableData = res.data.data.data.data;
      }
      this.rows = res.data.data.rows;
    },
  },
  mounted() {
    this.getContract();
  },
};
</script>
  
  <style>
</style>